<template>
    <el-card class="report-card" style="width: 50%;">
        <el-tabs type="border-card" width="500px" class="demo-tabs">
            <el-tab-pane label="健康体检表">
                <el-card class="box-card">
                    <!-- <template #header>
                        <div class="card-header2" width="100%" style="text-align:left">
                            <span>活动详情</span>
                        </div>
                    </template> -->
                    <div>
                        <el-table :data="reportData" style="width: 100%" height="310">
                            <el-table-column label="序号" prop="id" width="55%" />
                            <el-table-column label="体检日期" prop="time" width="165%" />
                            <el-table-column label="体检医生" prop="dId" width="100%">
                                <template #default="scope">
                                    {{ scope.row.doctor.name }}
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名" prop="uId">
                                <template #default="scope">
                                    {{ scope.row.user.name }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="70%">
                                <template #default="scope">
                                    <el-button size="small" text type="primary"
                                        @click="toDetail(scope.$index, scope.row)">查看</el-button>
                                    <!-- <el-button size="small" text type="primary"
                                        @click="toEdit(scope.$index, scope.row)">编辑</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane>
            <!-- <el-tab-pane label="未开始">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header" width="100%" style="text-align:left">
                            <span>活动详情</span>
                        </div>
                    </template>
                    <div>
                        <el-table :data="futureData" style="width: 100%" height="430">
                            <el-table-column label="活动名称" prop="activityName" width="180%" />
                            <el-table-column label="活动类别" prop="type" />
                            <el-table-column label="地点" prop="activityAddress" />
                            <el-table-column label="时间" prop="routes">
                                <template #default="scope">
                                    {{ scope.row.activityDate }} {{ scope.row.startTime }}
                                </template>
                            </el-table-column>
                            <el-table-column label="负责人" prop="name" />
                            <el-table-column label="联系电话" prop="telephone" />
                            <el-table-column label="活动积分" prop="activityPoint" />
                            <el-table-column label="订单状态" prop="myState" />
                            <el-table-column label="操作" fixed="right" width="110px">
                                <template #default="scope">
                                    <el-popconfirm width="180" confirm-button-text="确定" cancel-button-text="取消"
                                        :icon="InfoFilled" icon-color="#626AEF" :title="'确定要取消报名吗?'"
                                        @confirm="toCancel(scope.$index, scope.row)">
                                        <template #reference>
                                            <el-button size="small" type="primary"
                                                :disabled="scope.row.myState === '已取消报名' ? true : false">取消报名</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="已取消报名">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header2" width="100%" style="text-align:left">
                            <span>活动详情</span>
                        </div>
                    </template>
                    <div>
                        <el-table :data="canceledData" style="width: 100%" height="430">
                            <el-table-column label="活动名称" prop="activityName" width="180%" />
                            <el-table-column label="活动类别" prop="type" />
                            <el-table-column label="地点" prop="activityAddress" />
                            <el-table-column label="时间" prop="routes">
                                <template #default="scope">
                                    {{ scope.row.activityDate }} {{ scope.row.startTime }}
                                </template>
                            </el-table-column>
                            <el-table-column label="负责人" prop="name" />
                            <el-table-column label="联系电话" prop="telephone" />
                            <el-table-column label="活动积分" prop="activityPoint" />
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane> -->
        </el-tabs>
    </el-card>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useReportStore } from "../../../stores/report.js";
const reportStore = useReportStore()
const { reportData } = storeToRefs(reportStore)
const toDetail = (index, row) => {
    reportStore.pre4Detail(index, row)
}
</script>